<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
            
            /* root element for tabs  */
            ul.tabs {
                list-style: none;
                margin: 0 !important;
                padding: 0;
                border-bottom: 1px solid #666;
                height: 30px;
            }
            
            /* single tab */
            ul.tabs li {
                float: left;
                text-indent: 0;
                padding: 0;
                margin: 0 !important;
                list-style-image: none !important;
            }
            
            /* link inside the tab. uses a background image */
            ul.tabs a {
                background: url(./img/blue.png) no-repeat -420px 0;
                font-size: 11px;
                display: block;
                height: 30px;
                line-height: 30px;
                width: 134px;
                text-align: center;
                text-decoration: none;
                color: #333;
                padding: 0px;
                margin: 0px;
                position: relative;
                top: 1px;
            }
            
            ul.tabs a:active {
                outline: none;
            }
            
            /* when mouse enters the tab move the background image */
            ul.tabs a:hover {
                background-position: -420px -31px;
                color: #fff;
            }
            
            /* active tab uses a class name "current". its highlight is also done by moving the background image. */
            ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
                background-position: -420px -62px;
                cursor: default !important;
                color: #000 !important;
            }
            
            /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
            /* width 1 */
            ul.tabs a.s {
                background-position: -553px 0;
                width: 81px;
            }
            
            ul.tabs a.s:hover {
                background-position: -553px -31px;
            }
            
            ul.tabs a.s.current {
                background-position: -553px -62px;
            }
            
            /* width 2 */
            ul.tabs a.l {
                background-position: -248px -0px;
                width: 174px;
            }
            
            ul.tabs a.l:hover {
                background-position: -248px -31px;
            }
            
            ul.tabs a.l.current {
                background-position: -248px -62px;
            }
            
            /* width 3 */
            ul.tabs a.xl {
                background-position: 0 -0px;
                width: 248px;
            }
            
            ul.tabs a.xl:hover {
                background-position: 0 -31px;
            }
            
            ul.tabs a.xl.current {
                background-position: 0 -62px;
            }
            
            /* initially all panes are hidden */ .panes .pane {
                display: none;
            }
            
            /* tab pane styling */ .panes div {
                display: none;
                padding: 15px 10px;
                border: 1px solid #999;
                border-top: 0;
                height: 100px;
                font-size: 14px;
                background-color: #fff;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                //set ul.tabs to work as tabs 
                //for each div directly under div.pandes
                $("ul.tabs").tabs("div.panes > div");
            });
        </script>
    </head>
    <body>
        <!-- the tabs -->
        <ul class="tabs">
            <li>
                <a href="#first">Tab 1</a>
            </li>
            <li>
                <a href="#second">Tab 2</a>
            </li>
            <li>
                <a href="#third">Tab 3</a>
            </li>
        </ul>
        <!-- tab "panes" -->
        <div class="panes">
            <div>
                First pane. <a href="#third">open third tab</a>
            </div>
            <div>
                Second pane. You can open other tabs with normal<a href="#first">anchor links</a>
            </div>
            <div>
                Third tab content<a href="#second">link to second tab</a>
            </div>
        </div>
    </body>
</html>
